<template>
  <view class="container">
		<nav-ber :title="'切换省份'"></nav-ber>
		<view class="sea_pad">
			<u-search placeholder="搜索省份名称" v-model="keyword" :showAction="false" shape="round"></u-search>
		</view>
		<view class="province">
			<view v-for="(item) in 30" :key="item" :class="{
				'pro_list': true,
				'pro_list_is': (ispro == item)
				}" @click="proFun(item)">省份</view>
		</view>
  </view>
</template>
<script>
  export default {
    data() {
			return {
				keyword: '',
				ispro: '1',
			}
    },
		methods: {
			proFun(val) {
				this.ispro = val
			}
		}
  }
</script>
<style lang="scss" scoped>
	.sea_pad {
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.container {
		// background-color: #f7f8ff;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		height: 100vh;
		overflow: hidden;
	}
	.province {
		flex: 1;
		overflow: scroll;
		padding: 0 20rpx;
		margin-top: 20rpx;
	}
	.pro_list {
		padding: 20rpx 50rpx;
		box-sizing: border-box;
	}
	.pro_list_is {
		background-color: #f7f8ff;
		color: #2979ff;
		position: relative;
	}
	.pro_list_is::before {
		content: '';
		display: block;
		width: 10rpx;
		height: 50rpx;
		background-color: #2979ff;
		position: absolute;
		left: -20rpx;
	}
</style>
